<template>
    <div class="app-container">
        <!-- <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" v-on:click="prePage">返回</el-button>
        </el-button-group> -->
     <el-row :gutter="20">
            <el-col :span="18" :style="{magin:'0 auto'}">
                <el-col>
                    <!-- <el-card :style="{marginTop:'80px',marginBottom:'20px'}">
                添加设备
              </el-card> -->
                </el-col>
                 <el-button type="primary" plain v-on:click="addRoot" v-show= 'this.data2.length > 0 ?false:true' style="marginBottom:20px">添加根节点</el-button>
                <el-input placeholder="Filter keyword" v-model="filterText" style="margin-bottom:30px;"></el-input>
                <el-tree class="filter-tree" :data="data2"  default-expand-all  :filter-node-method="filterNode" ref="tree2">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                    <span>
                          <el-button
                            type="text"
                            size="medium"
                            @click.stop="() => appendC(node,data)">
                            添加子分类
                          </el-button>
                          <el-button
                              v-show="!data.children"
                            type="text"
                            size="medium"
                            @click.stop="() => delete_data(node, data)">
                            删除
                          </el-button>
                           <el-button
                            type="text"
                            size="medium"
                            @click = "showDetail">
                            
                          </el-button>
                        </span>
                    </span>
                </el-tree>
            </el-col>
     </el-row>
    </div>
</template>

<style lang="scss" scope>
    .headerInput {
        width: 30%;
        margin: 20px 0 30px;
    }
    
    .addBtn {
        margin-top: 20px;
    }
    
    .quill-code {
        border: none;
        height: auto;
        >code {
            width: 100%;
            margin: 0;
            padding: 1rem;
            border: 1px solid #ccc;
            border-top: none;
            border-radius: 0;
            height: 10rem;
            overflow-y: auto;
            resize: vertical;
        }
    }
    
    .quill-editor {
        width: 80%;
        // height: 400px;
    }
    
    .ql-editor {
        height: 300px;
    }
</style>

<script>
 import {
   treeDataTranslate
 } from '../../utils/Fromatetree.js'
 import {
   createWork,
   getDevice,
   createDeivce,
   deleteDevice
 } from '@/api/table'
 import {
   getConfig
 } from '@/utils/common.js'
 import {
   getCsrfToken,
   getToken
 } from '../../utils/auth.js'
 export default {
   data() {
     return {
       filterText: '',
       input: null,
       work: null,
       header: {
         'x-csrf-token': getCsrfToken(),
         'token': getToken(),
         length: '',
         baseUrl: ''
       },
       dialogTableVisible: false,
       content: '',
       data2: []
     }
   },
   watch: {
     filterText(val) {
       console.log('tree')
       this.$refs.tree2.filter(val)
     }
   },
   created() {},
 
   mounted() {
     this.getData()
     this.baseUrl = getConfig().baseUrl
   },
   methods: {
     addRoot() {
       this.appendC({}, {
         id: 100,
         parentId: ''
       })
     },
     delete_data(node, data) {
       console.log(node)
       console.log('====data===')
       console.log(data)
       const TreeDate = {
         id: data.id
       }

       this.$confirm('确认删除', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(async() => {
         await deleteDevice(TreeDate)
           .then((e) => {
             console.log(e)
             if (e.code == 2000) {
               setTimeout(() => {
                 this.getData()
               }, 2000)
             }
           })
           .catch((e) => {
             console.log(e)
           })
       }).catch(() => {
         this.$message({
           type: 'info',
           message: '已取消删除'
         })
       })
     },
     getData() {
       getDevice().then((e) => {
         console.log('e', e)
         const treeResult = treeDataTranslate(e.data)
         //   this.$set(this.data2, e.data)
         console.log('treeResult', treeResult)
         this.data2 = treeResult
       }).catch(() => {
 
       })
     },
     appendC(node, data) {
       console.log(node)
       console.log('====data===')
       console.log(data)
       const TreeDate = {
         treeid: data.id + 100,
         DeviceName: '',
         parentId: data.id
       }
       this.open3(TreeDate)
     },
     CreateDevice(data) {
       return createDeivce(data)
         .then((e) => {
           console.log(e)
           return e
         }).catch((e) => {
           console.log(e)
           return e
         })
     },
     open3(TreeDate) {
       this.$prompt('请输入设备名', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消'
       }).then(async({
         value
       }) => {
         console.log('open value', value)
         Object.assign(TreeDate, { DeviceName: value })
         const result = await this.CreateDevice(TreeDate)
         console.log('CreateDevice', result.code)
         if (result.code == 2000) {
           this.getData()
         }
       }).catch(() => {
         this.$message({
           type: 'info',
           message: '取消输入'
         })
       })
     },
     filterNode(value, data) {
       if (!value) return true
       console.log('filterNode', data)
       return data.DeviceName.indexOf(value) && data.DeviceName.indexOf(value) !== -1
     },
     prePage() {
       this.$router.back()
     },
     open4(msg, type = 'warning', title = '警告') {
       this.$notify({
         title: title,
         message: msg,
         type: type,
         onClose: () => {
           msg === '添加成功' ? this.$router.back() : null
         }
       })
     },
     update(data) {
       this.fullscreenLoading = true
       const obj = {}
       if (this.input) {
         obj.title = this.input
       } else {
         this.open4('请添加标题')
         return
       }
       if (this.content.length > 0) {
         obj.work = this.content
       } else {
         this.open4('请添加内容')
         return
       }
       createWork(obj).then((e) => {
         console.log('ob++++')
         console.log(e)
         this.open4('添加成功', 'success', '消息')
         this.fullscreenLoading = false
       }).catch((e) => {
         console.log('error')
         console.log(e)
         this.open4('添加失败', 'error', '消息')
         this.fullscreenLoading = false
       })
     },
     imgHandler(e) {
       this.dialogTableVisible = true
       console.log(e)
       console.log('imgHandler')
     },
     onEditorBlur() {
 
     },
     onEditorFocus() {
 
     },
     onEditorReady() {
 
     }
 
   }
 
 }
</script>
